<div class="content">
    <div id="example_title">
        <h1>Resizable Columns</h1>
        To make any column resizable, just add resizable: true in it definition. The grid below demonstrates resizable columns.
        <div style="height: 10px"></div>
        Starting with v2.0, you can double click on the column resizer to auto resize based on context, or you can <br>call
        <span class="method">columnAutoSize(ind)</span> to trigger column auto resize.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="grid" style="width: 800px; height: 400px;"></div>

<div style="height: 20px"></div>
<button class="w2ui-btn" onclick="autoSize()">Auto Size All Columns (2.0+)</button>
<button class="w2ui-btn" onclick="resetSize()">Reset Column Size</button>

<!--CODE-->
<script type="module">
import { w2grid, w2utils } from '__W2UI_PATH__'

let grid = new w2grid({
    name: 'grid',
    box: '#grid',
    header: 'List of Names',
    columns: [
        { field: 'fname', text: 'First Name', size: '30%', resizable: true, sortable: true },
        { field: 'lname', text: 'Last Name', size: '30%', resizable: true, sortable: true },
        { field: 'email', text: 'Email', size: '40%', resizable: true, sortable: true },
        { field: 'sdate', text: 'Start Date', size: '120px', resizable: true, sortable: true, hidden: true }
    ],
    records: [
        { recid: 1, fname: 'John', lname: 'Doe', email: 'john@gmail.com', sdate: '1/3/2012' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'stuart@gmail.com', sdate: '4/13/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jin@gmail.com', sdate: '3/3/2012' },
        { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'susan@gmail.com', sdate: '5/3/2012' },
        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'kelly@gmail.com', sdate: '8/19/2012' },
        { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'francis@gmail.com', sdate: '6/12/2012' },
        { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'mark@gmail.com', sdate: '8/13/2012' },
        { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'thomas@gmail.com', sdate: '4/31/2012' },
        { recid: 10, fname: 'John', lname: 'Doe', email: 'john@gmail.com', sdate: '1/3/2012' },
        { recid: 12, fname: 'Stuart', lname: 'Motzart', email: 'stuart@gmail.com', sdate: '4/13/2012' },
        { recid: 13, fname: 'Jin', lname: 'Franson', email: 'jin@gmail.com', sdate: '3/3/2012' },
        { recid: 14, fname: 'Susan', lname: 'Ottie', email: 'susan@gmail.com', sdate: '5/3/2012' },
        { recid: 15, fname: 'Kelly', lname: 'Silver', email: 'kelly@gmail.com', sdate: '8/19/2012' },
        { recid: 16, fname: 'Francis', lname: 'Gatos', email: 'francis@gmail.com', sdate: '6/12/2012' },
        { recid: 17, fname: 'Mark', lname: 'Welldo', email: 'mark@gmail.com', sdate: '8/13/2012' },
        { recid: 18, fname: 'Thomas', lname: 'Bahh', email: 'thomas@gmail.com', sdate: '4/31/2012' },
        { recid: 19, fname: 'Sergei', lname: 'Rachmaninov', email: 'sergei@gmail.com', sdate: '2/23/2012' }
    ]
})
window.autoSize = () => {
    grid.columnAutoSize()
}

window.resetSize = () => {
    grid.columns.forEach(col => {
        col.size = col.sizeOriginal
        delete col.sizeCalculated
    })
    grid.resizeRecords()
}
</script>
